<template>
	<view>
		<template v-if="current === 0">
			<view class="d-p-l-30 d-p-r-30" style="padding-left: 30rpx;padding-right: 30rpx;">
				<view class="d-list-box d-m-t-20 d-p-20 d-flex d-col-top" 
					style="margin-top: 20rpx;" :key="index" >
					<!-- <u-image :src="picture" width="148rpx" height="148rpx" shape="circle"></u-image> -->
					<view class="d-m-l-20 d-flex-1" style="margin-left: 20rpx;">
						<!-- <view class="d-white">场馆名称</view> -->
						<view class="d-cg">
							<view class="d-bold">{{cardarr.venue_name}}</view>
							<view class="d-bold d-img" @click="qcodeclick">
								<image :src="picture" mode="" class="d-image">
								</image>
							</view>
						</view>
						<view class="d-ming">
							<text style="padding: 1rpx 5rpx;background-color: #fff;color: #0E9698;border-radius: 10rpx;" v-if="cardarr.open_state == 1">开卡</text>
							<text style="padding: 1rpx 5rpx;background-color: #fff;color: #0E9698;border-radius: 10rpx;" v-if="cardarr.open_state == 0">未开卡</text>
								{{cardarr.card_name}}
						</view>
						<view class="d-white">{{cardarr.qr_code}}</view>
						<view class="d-xuxian d-white"></view>
						<!-- <view class="d-red">
							<view class="d-bold">剩余：50.00元</view>
							<view class="d-bold">2022-10-20</view>
						</view> -->
					</view>
				</view>
			</view>
			<!-- "card_type":"time"   时间卡
			card type": "num"  次卡
			card type": "money "  充值卡 -->
			<view class="d-du" v-if="cardarr.card_type == 'money'">
				<u-row :gutter="20">
					<u-col :span="6">
						<view class="box text-center">
							<view class="number">{{cardarr.recharge}}元</view>
							<view>剩余额度</view>
						</view>
					</u-col>
					<u-col :span="6">
						<view class="box text-center">
							<view class="number">{{cardarr.gift}}元</view>
							<view>赠送剩余</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="d-du" v-if="cardarr.card_type == 'num'">
				<u-row :gutter="20">
					<u-col :span="6">
						<view class="box text-center">
							<view class="number">{{cardarr.recharge}}次</view>
							<view>剩余额度</view>
						</view>
					</u-col>
					<u-col :span="6">
						<view class="box text-center">
							<view class="number">{{cardarr.gift}}次</view>
							<view>赠送剩余</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<zqBox v-model="scrollTop" >
				<view class="menu-cates">
					<view class="menu-cate-item_s" @click="onClickMenu(1)">
						<view class="pr flex-center flex-column">
							<u-image :src="`${assetsPath}20231123/b507ce8a7a36fdfd0ea4f5a619d3a45f.png`" width="90rpx"
								height="90rpx" />
							<text style="margin-top: 10rpx;">消费记录</text>
						</view>
					</view>
					<view class="menu-cate-item_s" @click="onClickMenu(2)">
						<view class="pr flex-center flex-column">
							<u-image :src="`${assetsPath}20231123/0830161ab576dee3f9abfd73e3be5fb7.png`" width="90rpx"
								height="90rpx" />
							<text style="margin-top: 10rpx;">充值记录</text>
						</view>
					</view>
					<view class="menu-cate-item_s" @click="onClickMenu(3)" >
						<view class="pr flex-center flex-column">
							<u-image :src="`${assetsPath}20231123/8372c0d6cef54ee6fd0d3ac651f2d216.png`" width="90rpx"
								height="90rpx" />
							<text style="margin-top: 10rpx;">续充</text>
						</view>
					</view>
					<view class="menu-cate-item_s"  >
						<view class="pr flex-center flex-column" v-if="data.cardstate == 3" @click="onClickMenu(4)" >
							<u-image :src="`${assetsPath}20231123/3ec883ce7c132f3a1751b1fe8764cd24.png`" width="90rpx"
								height="90rpx" />
							<text style="margin-top: 10rpx;">解挂</text>
						</view>
						<view class="pr flex-center flex-column" v-else  @click="onClickMenu(5)">
							<u-image :src="`${assetsPath}20231123/3ec883ce7c132f3a1751b1fe8764cd24.png`" width="90rpx"
								height="90rpx" />
							<text style="margin-top: 10rpx;">挂失</text>
						</view>
					</view>
					<view class="menu-cate-item_s" @click="onClickMenu(6)"  >
						<view class="pr flex-center flex-column">
							<u-image :src="`${assetsPath}20231123/e9666ee80300ef9a6daf8a839be12929.png`" width="90rpx"
								height="90rpx" />
							<text style="margin-top: 10rpx;">转移</text>
						</view>
					</view>
					<view class="menu-cate-item_s" @click="onClickMenu(7)">
						<view class="pr flex-center flex-column">
							<u-image :src="`${assetsPath}20231123/9a69d4d39bbe8cec9b6a3579b33d91fc.png`" width="90rpx"
								height="90rpx" />
							<text style="margin-top: 10rpx;">延期</text>
						</view>
					</view>
					<view class="menu-cate-item_s" @click="onClickMenu(8)" >
						<view class="pr flex-center flex-column">
							<u-image :src="`${assetsPath}20231123/4839e602fe550268addae91eb9b9bb72.png`" width="90rpx"
								height="90rpx" />
							<text style="margin-top: 10rpx;">转让</text>
						</view>
					</view>
					
					<view class="menu-cate-item_s" @click="onClickMenu(9)">
						<view class="pr flex-center flex-column">
							<u-image :src="`${assetsPath}20231123/ae6a2c33c16b87fd061b81e18c73eb69.png`" width="90rpx"
								height="90rpx" />
							<text style="margin-top: 10rpx;">封卡</text>
						</view>
					</view>
					<!-- <view class="menu-cate-item_s" @click="onClickMenu(6)" >
						<view class="pr flex-center flex-column">
							<u-image :src="`${assetsPath}7791562f4d0afe050feb9ee6efff491072a5b4b9.png`" width="90rpx"
								height="90rpx" />
							<text style="margin-top: 10rpx;">分享</text>
						</view>
					</view>
					<view class="menu-cate-item_s" @click="onClickMenu(7)">
						<view class="pr flex-center flex-column">
							<u-image :src="`${assetsPath}71430e79a08eb1216653e4f6b1c89150f6f4c2cd.png`" width="90rpx"
								height="90rpx" />
							<text style="margin-top: 10rpx;">保证金</text>
						</view>
					</view>
					<view class="menu-cate-item_s" @click="onClickMenu(9)">
						<view class="pr flex-center flex-column">
							<u-image :src="`${assetsPath}105ab98a5cc57b3159cbabc882ebb6faa7fed10b.png`" width="90rpx"
								height="90rpx" />
							<text style="margin-top: 10rpx;">别名</text>
						</view>
					</view> -->
			
				</view>
			</zqBox>
			<!-- <u-cell-group>
				<u-cell v-for="(itm,idx) in 3" :key="idx">
					<view slot="title">
						<view class="date" v-if="itm.billtime != '' && itm.billtime != null">消费时间：{{itm.billtime}}</view>
						<view class="date" v-else>消费时间： --</view>
						<view class="date" v-if="itm.intime != '' && itm.intime != null">进场时间：{{itm.intime}}</view>
						<view class="date" v-else>进场时间： --</view>
						<view class="date" v-if="itm.outtime != '' && itm.outtime != null">出场时间：{{itm.outtime}}</view>
						<view class="date" v-else>出场时间： --</view>
					</view>
					<view slot="value" class="text-right" >
						<view class="rest" >消费模式：{{itm.modeltype}}</view>
					</view>
				</u-cell>
			</u-cell-group> -->
			<!-- 二维码弹窗 -->
			<view class="qcode_b" v-if="qcode_if" @click="qcodeguanbi"></view>
			<view class="qcode" v-if="qcode_if" @click="qcodeguanbi">
				<view class="qline">
					<view class="l1"></view>
					<view class="l1 l2"></view>
				</view>
				<view class="d-p-t-60">
					<view class="d-qrd">
						<view class="qcard">
							<view class="q1"></view>
							<view class="q1 q2"></view>
						</view>
						<view class="d-text-center d-p-t-60 d-main" style="	text-align: center;padding-top: 60rpx;">使用时请出示此二维码</view>
						<view class="d-flex d-row-center d-m-t-15" style="margin-top: 15rpx;">
							<!-- <u-image :src="$demo" width="370rpx" height="370rpx"></u-image> -->
							<uQRCode ref="qrcode" canvas-id="qrcode" :value="qr_code" size="185"></uQRCode>
						</view>
						<view class="d-main d-font-32 d-text-center d-m-t-30" style="font-size: 32rpx;margin-top: 30rpx;">{{ qr_code }}</view>
						<view class="d-text-center d-99 d-font-22" style="font-size: 22rpx;">为保障用户权益，二维码有效期为1分钟，请尽快展示核销</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue'
	const index = require("@/api/index/index.js");
	export default {
		components: {
			uQRCode
		},
		data() {
			return {
				assetsPath: this.$https.assetsPath,
				current: 0,
				list: [],
				index: 0,
				qcode_if: false,
				cardType:'',
				cardno:'123132123132',
				cardarr:{},
				consumeInfoarr:{},
				picture: this.$https.assetsPath + "20231120/9203cdc6cd8e16056ea127c3999027e1.png",
				id:'',
				qr_code:""
			};
		},
		onLoad(e) {
			console.log(e,'1111')
			this.id = e.id
			this.getcardList()
		},
		methods: {
			async getcardList() {
				let postData = {
					ids: this.id,
				};
				let res = await index.user_cardview(postData);
				if (res.code === 1) {
					console.log(res, '222')
					this.cardarr = res.data
					this.qr_code = res.data.qr_code
				}
			},
			onClickMenu(item) {
				let that = this
				if (item == "1") {
					uni.navigateTo({
						url:'../../pages_give/cardbag/card_consumption?card_id=' + this.cardarr.id
					})
				}
				if (item == "2") {
					uni.navigateTo({
						url:'../../pages_give/cardbag/card_record'
					})
				}
				if (item == "3") {
			
				}
				if (item == "4") {
					
				}
				if (item == "5") {
					
				}
				if (item == "6") {
					
				}
				if (item == "7") {
					
				}
				if (item == "8") {
					
				}
				if (item == "9") {
				}
				
			},
			qcodeclick() {
				this.qcode_if = true
			},
			qcodeguanbi() {
				this.qcode_if = false
			},
		}
	};
</script>

<style lang="scss" scoped>
	.d-list-box {
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		background: rgb(48, 182, 134);
		border-radius: 10rpx;
	}

	.d-list-box1 {
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		background: rgb(48, 182, 134);
		border-radius: 10rpx;
	}

	.d-list-box2 {
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		background: rgb(253, 168, 92);
		border-radius: 10rpx;
	}

	.d-tag {
		background: #f3f3f3;
		border-radius: 4rpx;
		height: 36rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 0 18rpx;
	}

	.d-be {
		color: #bebebe;
	}

	.d-red {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-white {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-xuxian {
		width: 100%;
		height: 1rpx;
		border-bottom: 1px dashed white;
		margin-top: 10rpx;
	}

	.d-bold {
		font-weight: bold;
		margin-right: 20rpx;
	}

	.qline {
		position: relative;

		.l1 {
			width: 20rpx;
			height: 60rpx;
			background: #dce0fd;
			border-radius: 10rpx;
			position: absolute;
			left: 130rpx;
			bottom: -60rpx;
		}

		.l2 {
			left: auto;
			right: 130rpx;
		}
	}

	.d-qrd {
		width: 626rpx;
		min-height: 820rpx;
		background: #ffffff;
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		border-radius: 10rpx;
		margin: -22rpx auto 0;
	}

	.qcard {
		position: relative;

		.q1 {
			width: 22rpx;
			height: 22rpx;
			background: #ffffff;
			border: 4rpx solid #575c86;
			border-radius: 50%;
			box-sizing: border-box;
			position: absolute;
			left: 99rpx;
		}

		.q2 {
			left: auto;
			right: 99rpx;
		}
	}

	.d-main {
		color: #59a0ff;
	}

	.d-99 {
		color: #999;
	}

	.d-filter {
		filter: grayscale(100%);
	}

	.d-img {
		width: 8vw;
		height: 8vw;
		background-color: #ffffff;
		border-radius: 1vw;
	}

	.d-image {
		width: 7vw;
		height: 7vw;
		margin: 0.5vw 0 0 0.5vw;
	}

	.qcode {
		position: absolute;
		right: 9vw;
		top: 40vw;
		padding-top: 0.5vw;
		z-index: 999;
	}

	.qcode_b {
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 998;
		background-color: #f3f3f3;
	}

	.d-du {
		padding: 0 4vw;

		/deep/.u-row {
			margin-top: 40rpx;

			.box {
				border-radius: 12rpx;
				padding: 40rpx 0;
				background-color: #ffffff;
				box-shadow: 0 0 3vw 0 rgba(0, 0, 0, 0.1);
				border-radius: 3vw;

				.number {
					color: #38bbff;
					margin-bottom: 40rpx;
					font-weight: bold;
					font-size: 5vw;
				}
			}
		}
	}
	/deep/.u-cell-group {
		margin-top: 30rpx;
		.name {
			color: #333;
			font-weight: bold;
		}
	
		.number {
			color: #ff0000;
		}
	
		.date {
			color: #ccc;
		}
	
		.rest {
			color: #9c9c9c;
		}
	
		.rest,
		.date {
			margin-top: 14rpx;
			font-size: 26rpx;
		}
	}
	
	.d-red {
		color: #ffffff;
		margin-top: 20rpx !important;
		font-size: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.d-cg {
		color: #ffffff;
		margin-top: 20rpx !important;
		font-size: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.d-ming {
		color: #ffffff;
		margin-top: 10rpx !important;
		font-size: 30rpx
	}
	
	.d-white {
		color: #ffffff;
		margin-top: 20rpx !important;
		font-size: 30rpx
	}
	.d-xuxian {
		width: 86vw;
		height: 1rpx;
		border-bottom: 1px dashed white;
		margin-top: 10rpx;
	}
	.menu-cates{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-top: 30rpx;
	}
	
	.menu-cate-item{
		width: 25%;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.menu-cate-item_s{
		width: 33.3%;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
	}
	
	.orders .menu-cate-item {
		width: 25%;
		margin: 0 !important;
	}
	
	.menu-cate-item .u-image {
		margin-bottom: 10rpx;
	}
	
	.menu-cate-item:not(:nth-of-type(-n + 4)) {
		margin-top: 30rpx;
	}
	
	.u-cell-group {
		
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0px 13rpx 57rpx rgba(8,73,162,0.11);
		overflow: hidden;
	}
	
	.u-cell-group .u-cell-group__wrapper > .u-line,
	.u-cell-group .u-cell:last-of-type > .u-line {
		display: none;
	}
	
	.u-cell-group .u-cell__body {
		height: 110rpx;
	}
	
	.zq-box {
		box-shadow: 0px 13rpx 57rpx rgba(8,73,162,0.11) !important;
	}
</style>